<template>
  <div class="exam-result" v-loading="loading">
    <!-- 结果头部 -->
    <div class="result-header">
      <div class="container">
        <div class="header-content">
          <!-- 面包屑导航 -->
          <div class="breadcrumb">
            <el-breadcrumb separator=">">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/exams' }">考试中心</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: `/exam/${exam.id}` }">{{ exam.title }}</el-breadcrumb-item>
              <el-breadcrumb-item>考试结果</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          
          <!-- 成绩展示 -->
          <div class="score-display">
            <div class="score-main">
              <div class="score-circle" :class="getScoreClass(result.score)">
                <div class="score-value">{{ result.score }}</div>
                <div class="score-total">/ {{ exam.totalScore }}</div>
              </div>
              
              <div class="score-info">
                <h1 class="result-title">{{ getResultTitle(result.score) }}</h1>
                <div class="result-status" :class="getScoreClass(result.score)">
                  {{ result.score >= exam.passScore ? '考试通过' : '考试未通过' }}
                </div>
                <div class="score-details">
                  <div class="detail-item">
                    <span class="detail-label">正确率：</span>
                    <span class="detail-value">{{ result.accuracy }}%</span>
                  </div>
                  <div class="detail-item">
                    <span class="detail-label">用时：</span>
                    <span class="detail-value">{{ formatDuration(result.duration) }}</span>
                  </div>
                  <div class="detail-item">
                    <span class="detail-label">排名：</span>
                    <span class="detail-value">{{ result.rank }} / {{ result.totalParticipants }}</span>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="result-actions">
              <el-button
                type="primary"
                size="large"
                @click="viewAnalysis"
              >
                查看解析
              </el-button>
              
              <el-button
                v-if="exam.allowRetake"
                type="warning"
                size="large"
                plain
                @click="retakeExam"
              >
                重新考试
              </el-button>
              
              <el-button
                type="success"
                size="large"
                plain
                @click="downloadCertificate"
                :disabled="result.score < exam.passScore"
              >
                下载证书
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 详细分析 -->
    <div class="result-content">
      <div class="container">
        <el-tabs v-model="activeTab" class="result-tabs">
          <!-- 成绩分析 -->
          <el-tab-pane label="成绩分析" name="analysis">
            <div class="analysis-content">
              <!-- 总体统计 -->
              <div class="stats-overview">
                <div class="stat-card">
                  <div class="stat-icon correct">
                    <el-icon><Check /></el-icon>
                  </div>
                  <div class="stat-info">
                    <div class="stat-value">{{ result.correctCount }}</div>
                    <div class="stat-label">答对题数</div>
                  </div>
                </div>
                
                <div class="stat-card">
                  <div class="stat-icon wrong">
                    <el-icon><Close /></el-icon>
                  </div>
                  <div class="stat-info">
                    <div class="stat-value">{{ result.wrongCount }}</div>
                    <div class="stat-label">答错题数</div>
                  </div>
                </div>
                
                <div class="stat-card">
                  <div class="stat-icon skip">
                    <el-icon><Minus /></el-icon>
                  </div>
                  <div class="stat-info">
                    <div class="stat-value">{{ result.skipCount }}</div>
                    <div class="stat-label">未答题数</div>
                  </div>
                </div>
                
                <div class="stat-card">
                  <div class="stat-icon time">
                    <el-icon><Clock /></el-icon>
                  </div>
                  <div class="stat-info">
                    <div class="stat-value">{{ formatDuration(result.duration) }}</div>
                    <div class="stat-label">答题用时</div>
                  </div>
                </div>
              </div>
              
              <!-- 题型分析 -->
              <div class="type-analysis">
                <h3>题型分析</h3>
                <div class="type-stats">
                  <div
                    v-for="(typeResult, index) in result.typeResults"
                    :key="index"
                    class="type-item"
                  >
                    <div class="type-header">
                      <div class="type-name">{{ getQuestionTypeText(typeResult.type) }}</div>
                      <div class="type-score">{{ typeResult.score }} / {{ typeResult.totalScore }}分</div>
                    </div>
                    
                    <div class="type-progress">
                      <el-progress
                        :percentage="Math.round((typeResult.score / typeResult.totalScore) * 100)"
                        :color="getProgressColor(typeResult.score / typeResult.totalScore)"
                        :show-text="false"
                      />
                    </div>
                    
                    <div class="type-details">
                      <span>正确：{{ typeResult.correctCount }}题</span>
                      <span>错误：{{ typeResult.wrongCount }}题</span>
                      <span>未答：{{ typeResult.skipCount }}题</span>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 知识点分析 -->
              <div class="knowledge-analysis">
                <h3>知识点掌握情况</h3>
                <div class="knowledge-stats">
                  <div
                    v-for="(knowledge, index) in result.knowledgeResults"
                    :key="index"
                    class="knowledge-item"
                  >
                    <div class="knowledge-header">
                      <div class="knowledge-name">{{ knowledge.name }}</div>
                      <div class="knowledge-level" :class="getMasteryClass(knowledge.mastery)">
                        {{ getMasteryText(knowledge.mastery) }}
                      </div>
                    </div>
                    
                    <div class="knowledge-progress">
                      <el-progress
                        :percentage="knowledge.accuracy"
                        :color="getProgressColor(knowledge.accuracy / 100)"
                      />
                    </div>
                    
                    <div class="knowledge-details">
                      <span>答对：{{ knowledge.correctCount }} / {{ knowledge.totalCount }}题</span>
                      <span>正确率：{{ knowledge.accuracy }}%</span>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 能力雷达图 -->
              <div class="ability-radar">
                <h3>能力分析</h3>
                <div class="radar-container">
                  <div class="radar-chart" ref="radarChart"></div>
                  <div class="radar-legend">
                    <div
                      v-for="(ability, index) in result.abilityResults"
                      :key="index"
                      class="legend-item"
                    >
                      <div class="legend-color" :style="{ backgroundColor: getAbilityColor(index) }"></div>
                      <div class="legend-text">
                        <div class="ability-name">{{ ability.name }}</div>
                        <div class="ability-score">{{ ability.score }}分</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          
          <!-- 错题分析 -->
          <el-tab-pane label="错题分析" name="mistakes">
            <div class="mistakes-content">
              <div class="mistakes-header">
                <h3>错题列表 ({{ mistakes.length }}题)</h3>
                <div class="mistakes-filters">
                  <el-select v-model="mistakeFilter" @change="filterMistakes">
                    <el-option label="全部错题" value="all" />
                    <el-option label="单选题" value="single" />
                    <el-option label="多选题" value="multiple" />
                    <el-option label="判断题" value="judge" />
                    <el-option label="填空题" value="fill" />
                    <el-option label="简答题" value="essay" />
                  </el-select>
                </div>
              </div>
              
              <div class="mistakes-list">
                <div
                  v-for="(mistake, index) in filteredMistakes"
                  :key="mistake.id"
                  class="mistake-item"
                >
                  <div class="mistake-header">
                    <div class="mistake-number">第{{ mistake.questionNumber }}题</div>
                    <div class="mistake-type">{{ getQuestionTypeText(mistake.type) }}</div>
                    <div class="mistake-score">{{ mistake.score }}分</div>
                  </div>
                  
                  <div class="mistake-content">
                    <div class="question-text" v-html="mistake.content"></div>
                    
                    <div class="answer-comparison">
                      <div class="answer-section">
                        <div class="answer-label wrong">您的答案：</div>
                        <div class="answer-value wrong">{{ formatAnswer(mistake.userAnswer, mistake.type) }}</div>
                      </div>
                      
                      <div class="answer-section">
                        <div class="answer-label correct">正确答案：</div>
                        <div class="answer-value correct">{{ formatAnswer(mistake.correctAnswer, mistake.type) }}</div>
                      </div>
                    </div>
                    
                    <div v-if="mistake.analysis" class="mistake-analysis">
                      <div class="analysis-label">
                        <el-icon><Document /></el-icon>
                        解析：
                      </div>
                      <div class="analysis-text" v-html="mistake.analysis"></div>
                    </div>
                    
                    <div class="mistake-tags">
                      <el-tag
                        v-for="tag in mistake.knowledgePoints"
                        :key="tag"
                        size="small"
                        type="info"
                      >
                        {{ tag }}
                      </el-tag>
                    </div>
                  </div>
                </div>
              </div>
              
              <div v-if="filteredMistakes.length === 0" class="empty-mistakes">
                <el-empty description="暂无错题" />
              </div>
            </div>
          </el-tab-pane>
          
          <!-- 答题回顾 -->
          <el-tab-pane label="答题回顾" name="review">
            <div class="review-content">
              <div class="review-header">
                <h3>答题详情</h3>
                <div class="review-filters">
                  <el-radio-group v-model="reviewFilter" @change="filterReview">
                    <el-radio-button label="all">全部</el-radio-button>
                    <el-radio-button label="correct">正确</el-radio-button>
                    <el-radio-button label="wrong">错误</el-radio-button>
                    <el-radio-button label="skip">未答</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
              
              <div class="review-list">
                <div
                  v-for="(question, index) in filteredReview"
                  :key="question.id"
                  class="review-item"
                  :class="getReviewItemClass(question.status)"
                >
                  <div class="review-header">
                    <div class="review-number">第{{ question.questionNumber }}题</div>
                    <div class="review-type">{{ getQuestionTypeText(question.type) }}</div>
                    <div class="review-status" :class="question.status">
                      <el-icon v-if="question.status === 'correct'"><Check /></el-icon>
                      <el-icon v-else-if="question.status === 'wrong'"><Close /></el-icon>
                      <el-icon v-else><Minus /></el-icon>
                      {{ getStatusText(question.status) }}
                    </div>
                    <div class="review-score">{{ question.score }}分</div>
                  </div>
                  
                  <div class="review-content">
                    <div class="question-text" v-html="question.content"></div>
                    
                    <div v-if="question.userAnswer" class="user-answer">
                      <div class="answer-label">您的答案：</div>
                      <div class="answer-value">{{ formatAnswer(question.userAnswer, question.type) }}</div>
                    </div>
                    
                    <div class="correct-answer">
                      <div class="answer-label">正确答案：</div>
                      <div class="answer-value">{{ formatAnswer(question.correctAnswer, question.type) }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  Check,
  Close,
  Minus,
  Clock,
  Document
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getExamResult, retakeExamRequest, downloadExamCertificate } from '@/api/exam'

const route = useRoute()
const router = useRouter()

// 响应式数据
const loading = ref(true)
const exam = ref({})
const result = ref({})
const mistakes = ref([])
const activeTab = ref('analysis')
const mistakeFilter = ref('all')
const reviewFilter = ref('all')
const radarChart = ref(null)

// 计算属性
const filteredMistakes = computed(() => {
  if (mistakeFilter.value === 'all') {
    return mistakes.value
  }
  return mistakes.value.filter(mistake => mistake.type === mistakeFilter.value)
})

const filteredReview = computed(() => {
  if (reviewFilter.value === 'all') {
    return result.value.questions || []
  }
  return (result.value.questions || []).filter(question => question.status === reviewFilter.value)
})

// 方法
const formatDuration = (seconds) => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60
  
  if (hours > 0) {
    return `${hours}小时${minutes}分钟${secs}秒`
  } else if (minutes > 0) {
    return `${minutes}分钟${secs}秒`
  } else {
    return `${secs}秒`
  }
}

const getScoreClass = (score) => {
  if (score >= 90) return 'excellent'
  if (score >= 80) return 'good'
  if (score >= 60) return 'pass'
  return 'fail'
}

const getResultTitle = (score) => {
  if (score >= 90) return '优秀！'
  if (score >= 80) return '良好！'
  if (score >= 60) return '及格！'
  return '需要努力！'
}

const getQuestionTypeText = (type) => {
  const texts = {
    single: '单选题',
    multiple: '多选题',
    judge: '判断题',
    fill: '填空题',
    essay: '简答题'
  }
  return texts[type] || '其他'
}

const getProgressColor = (ratio) => {
  if (ratio >= 0.9) return '#67c23a'
  if (ratio >= 0.8) return '#409eff'
  if (ratio >= 0.6) return '#e6a23c'
  return '#f56c6c'
}

const getMasteryClass = (mastery) => {
  const classes = {
    excellent: 'mastery-excellent',
    good: 'mastery-good',
    fair: 'mastery-fair',
    poor: 'mastery-poor'
  }
  return classes[mastery] || 'mastery-poor'
}

const getMasteryText = (mastery) => {
  const texts = {
    excellent: '优秀',
    good: '良好',
    fair: '一般',
    poor: '较差'
  }
  return texts[mastery] || '较差'
}

const getAbilityColor = (index) => {
  const colors = ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399', '#c71585']
  return colors[index % colors.length]
}

const formatAnswer = (answer, type) => {
  if (!answer) return '未作答'
  
  if (type === 'single' || type === 'judge') {
    return answer
  } else if (type === 'multiple') {
    return Array.isArray(answer) ? answer.join(', ') : answer
  } else if (type === 'fill') {
    return Array.isArray(answer) ? answer.join(' | ') : answer
  } else {
    return answer
  }
}

const getReviewItemClass = (status) => {
  return `review-${status}`
}

const getStatusText = (status) => {
  const texts = {
    correct: '正确',
    wrong: '错误',
    skip: '未答'
  }
  return texts[status] || '未知'
}

// 事件处理
const viewAnalysis = () => {
  activeTab.value = 'mistakes'
}

const retakeExam = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要重新考试吗？重新考试将覆盖当前成绩。',
      '重新考试',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    await retakeExamRequest(exam.value.id)
    router.push(`/exam/${exam.value.id}/take`)
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('重新考试失败')
    }
  }
}

const downloadCertificate = async () => {
  try {
    const response = await downloadExamCertificate(exam.value.id)
    
    // 创建下载链接
    const blob = new Blob([response.data], { type: 'application/pdf' })
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `${exam.value.title}-证书.pdf`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
    
    ElMessage.success('证书下载成功')
  } catch (error) {
    ElMessage.error('证书下载失败')
  }
}

const filterMistakes = () => {
  // 筛选错题逻辑已在计算属性中实现
}

const filterReview = () => {
  // 筛选回顾逻辑已在计算属性中实现
}

// 绘制雷达图
const drawRadarChart = () => {
  if (!radarChart.value || !result.value.abilityResults) return
  
  // 这里可以使用 ECharts 或其他图表库绘制雷达图
  // 简化实现，使用 CSS 绘制简单的雷达图
  const container = radarChart.value
  container.innerHTML = ''
  
  const abilities = result.value.abilityResults
  const maxScore = Math.max(...abilities.map(a => a.score))
  
  // 创建雷达图 SVG
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
  svg.setAttribute('width', '300')
  svg.setAttribute('height', '300')
  svg.setAttribute('viewBox', '0 0 300 300')
  
  const centerX = 150
  const centerY = 150
  const radius = 100
  
  // 绘制网格
  for (let i = 1; i <= 5; i++) {
    const r = (radius * i) / 5
    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
    circle.setAttribute('cx', centerX)
    circle.setAttribute('cy', centerY)
    circle.setAttribute('r', r)
    circle.setAttribute('fill', 'none')
    circle.setAttribute('stroke', '#e0e0e0')
    circle.setAttribute('stroke-width', '1')
    svg.appendChild(circle)
  }
  
  // 绘制轴线和标签
  abilities.forEach((ability, index) => {
    const angle = (index * 2 * Math.PI) / abilities.length - Math.PI / 2
    const x = centerX + radius * Math.cos(angle)
    const y = centerY + radius * Math.sin(angle)
    
    // 轴线
    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line')
    line.setAttribute('x1', centerX)
    line.setAttribute('y1', centerY)
    line.setAttribute('x2', x)
    line.setAttribute('y2', y)
    line.setAttribute('stroke', '#e0e0e0')
    line.setAttribute('stroke-width', '1')
    svg.appendChild(line)
    
    // 标签
    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text')
    const labelX = centerX + (radius + 20) * Math.cos(angle)
    const labelY = centerY + (radius + 20) * Math.sin(angle)
    text.setAttribute('x', labelX)
    text.setAttribute('y', labelY)
    text.setAttribute('text-anchor', 'middle')
    text.setAttribute('dominant-baseline', 'middle')
    text.setAttribute('font-size', '12')
    text.setAttribute('fill', '#666')
    text.textContent = ability.name
    svg.appendChild(text)
  })
  
  // 绘制数据多边形
  const points = abilities.map((ability, index) => {
    const angle = (index * 2 * Math.PI) / abilities.length - Math.PI / 2
    const r = (radius * ability.score) / maxScore
    const x = centerX + r * Math.cos(angle)
    const y = centerY + r * Math.sin(angle)
    return `${x},${y}`
  }).join(' ')
  
  const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon')
  polygon.setAttribute('points', points)
  polygon.setAttribute('fill', 'rgba(64, 158, 255, 0.3)')
  polygon.setAttribute('stroke', '#409eff')
  polygon.setAttribute('stroke-width', '2')
  svg.appendChild(polygon)
  
  // 绘制数据点
  abilities.forEach((ability, index) => {
    const angle = (index * 2 * Math.PI) / abilities.length - Math.PI / 2
    const r = (radius * ability.score) / maxScore
    const x = centerX + r * Math.cos(angle)
    const y = centerY + r * Math.sin(angle)
    
    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
    circle.setAttribute('cx', x)
    circle.setAttribute('cy', y)
    circle.setAttribute('r', '4')
    circle.setAttribute('fill', '#409eff')
    svg.appendChild(circle)
  })
  
  container.appendChild(svg)
}

// 数据加载
const loadExamResult = async () => {
  try {
    loading.value = true
    const response = await getExamResult(route.params.id)
    
    exam.value = response.data.exam
    result.value = response.data.result
    mistakes.value = response.data.mistakes || []
    
    // 绘制雷达图
    nextTick(() => {
      drawRadarChart()
    })
  } catch (error) {
    ElMessage.error('加载考试结果失败')
    router.push('/exams')
  } finally {
    loading.value = false
  }
}

// 生命周期
onMounted(() => {
  loadExamResult()
})
</script>

<style lang="scss" scoped>
.exam-result {
  min-height: 100vh;
  background: var(--bg-color);
}

.result-header {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
  color: white;
  padding: var(--spacing-xl) 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.breadcrumb {
  margin-bottom: var(--spacing-lg);
  
  :deep(.el-breadcrumb__inner) {
    color: rgba(255, 255, 255, 0.8);
    
    &.is-link {
      color: white;
      
      &:hover {
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
  
  :deep(.el-breadcrumb__separator) {
    color: rgba(255, 255, 255, 0.6);
  }
}

.score-display {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--spacing-xl);
  align-items: center;
}

.score-main {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
}

.score-circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 4px;
    background: linear-gradient(45deg, currentColor, transparent);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
  }
  
  .score-value {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
  }
  
  .score-total {
    font-size: var(--font-size-medium);
    opacity: 0.8;
  }
  
  &.excellent {
    color: var(--success-color);
    background: rgba(103, 194, 58, 0.1);
  }
  
  &.good {
    color: var(--primary-color);
    background: rgba(64, 158, 255, 0.1);
  }
  
  &.pass {
    color: var(--warning-color);
    background: rgba(230, 162, 60, 0.1);
  }
  
  &.fail {
    color: var(--danger-color);
    background: rgba(245, 108, 108, 0.1);
  }
}

.score-info {
  .result-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-sm) 0;
  }
  
  .result-status {
    font-size: var(--font-size-large);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    
    &.excellent,
    &.good,
    &.pass {
      color: var(--success-color);
    }
    
    &.fail {
      color: var(--danger-color);
    }
  }
}

.score-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.detail-item {
  display: flex;
  font-size: var(--font-size-base);
  
  .detail-label {
    min-width: 80px;
    opacity: 0.8;
  }
  
  .detail-value {
    font-weight: 500;
  }
}

.result-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.result-content {
  padding: var(--spacing-xl) 0;
}

.result-tabs {
  background: white;
  border-radius: var(--border-radius-base);
  box-shadow: var(--box-shadow-light);
  overflow: hidden;
  
  :deep(.el-tabs__header) {
    margin: 0;
    background: var(--fill-color-extra-light);
    padding: 0 var(--spacing-lg);
  }
  
  :deep(.el-tabs__content) {
    padding: var(--spacing-xl);
  }
}

.analysis-content {
  h3 {
    font-size: var(--font-size-large);
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    color: var(--text-color-primary);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: var(--spacing-sm);
  }
}

.stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.stat-card {
  background: var(--fill-color-extra-light);
  border-radius: var(--border-radius-base);
  padding: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  
  .stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    
    &.correct {
      background: var(--success-color-light-9);
      color: var(--success-color);
    }
    
    &.wrong {
      background: var(--danger-color-light-9);
      color: var(--danger-color);
    }
    
    &.skip {
      background: var(--warning-color-light-9);
      color: var(--warning-color);
    }
    
    &.time {
      background: var(--info-color-light-9);
      color: var(--info-color);
    }
  }
  
  .stat-info {
    .stat-value {
      font-size: var(--font-size-large);
      font-weight: 700;
      color: var(--text-color-primary);
      line-height: 1;
      margin-bottom: var(--spacing-xs);
    }
    
    .stat-label {
      font-size: var(--font-size-small);
      color: var(--text-color-secondary);
    }
  }
}

.type-analysis,
.knowledge-analysis {
  margin-bottom: var(--spacing-xl);
}

.type-stats,
.knowledge-stats {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.type-item,
.knowledge-item {
  background: var(--fill-color-extra-light);
  border-radius: var(--border-radius-base);
  padding: var(--spacing-lg);
}

.type-header,
.knowledge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  
  .type-name,
  .knowledge-name {
    font-weight: 600;
    color: var(--text-color-primary);
  }
  
  .type-score {
    font-weight: 600;
    color: var(--primary-color);
  }
  
  .knowledge-level {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-small);
    font-size: var(--font-size-small);
    font-weight: 500;
    
    &.mastery-excellent {
      background: var(--success-color-light-9);
      color: var(--success-color);
    }
    
    &.mastery-good {
      background: var(--primary-color-light-9);
      color: var(--primary-color);
    }
    
    &.mastery-fair {
      background: var(--warning-color-light-9);
      color: var(--warning-color);
    }
    
    &.mastery-poor {
      background: var(--danger-color-light-9);
      color: var(--danger-color);
    }
  }
}

.type-progress,
.knowledge-progress {
  margin-bottom: var(--spacing-sm);
}

.type-details,
.knowledge-details {
  display: flex;
  gap: var(--spacing-md);
  font-size: var(--font-size-small);
  color: var(--text-color-secondary);
}

.ability-radar {
  .radar-container {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: var(--spacing-lg);
    align-items: center;
  }
  
  .radar-chart {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
  }
  
  .radar-legend {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
  }
  
  .legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    
    .legend-color {
      width: 16px;
      height: 16px;
      border-radius: 50%;
    }
    
    .legend-text {
      .ability-name {
        font-weight: 500;
        color: var(--text-color-primary);
        margin-bottom: var(--spacing-xs);
      }
      
      .ability-score {
        font-size: var(--font-size-small);
        color: var(--text-color-secondary);
      }
    }
  }
}

.mistakes-content,
.review-content {
  h3 {
    font-size: var(--font-size-large);
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    color: var(--text-color-primary);
  }
}

.mistakes-header,
.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  
  h3 {
    margin: 0;
  }
}

.mistakes-list,
.review-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.mistake-item,
.review-item {
  background: var(--fill-color-extra-light);
  border-radius: var(--border-radius-base);
  padding: var(--spacing-lg);
  border-left: 4px solid var(--danger-color);
  
  &.review-correct {
    border-left-color: var(--success-color);
  }
  
  &.review-wrong {
    border-left-color: var(--danger-color);
  }
  
  &.review-skip {
    border-left-color: var(--warning-color);
  }
}

.mistake-header,
.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  
  .mistake-number,
  .review-number {
    font-weight: 600;
    color: var(--text-color-primary);
  }
  
  .mistake-type,
  .review-type {
    background: var(--primary-color);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-small);
    font-size: var(--font-size-small);
  }
  
  .review-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-small);
    font-size: var(--font-size-small);
    font-weight: 500;
    
    &.correct {
      background: var(--success-color-light-9);
      color: var(--success-color);
    }
    
    &.wrong {
      background: var(--danger-color-light-9);
      color: var(--danger-color);
    }
    
    &.skip {
      background: var(--warning-color-light-9);
      color: var(--warning-color);
    }
  }
  
  .mistake-score,
  .review-score {
    font-size: var(--font-size-small);
    color: var(--text-color-secondary);
  }
}

.mistake-content,
.review-content {
  .question-text {
    font-size: var(--font-size-medium);
    line-height: 1.6;
    color: var(--text-color-primary);
    margin-bottom: var(--spacing-lg);
  }
}

.answer-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.answer-section {
  .answer-label {
    font-size: var(--font-size-small);
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    
    &.wrong {
      color: var(--danger-color);
    }
    
    &.correct {
      color: var(--success-color);
    }
  }
  
  .answer-value {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-base);
    
    &.wrong {
      background: var(--danger-color-light-9);
      color: var(--danger-color);
    }
    
    &.correct {
      background: var(--success-color-light-9);
      color: var(--success-color);
    }
  }
}

.user-answer,
.correct-answer {
  margin-bottom: var(--spacing-md);
  
  .answer-label {
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--text-color-secondary);
    margin-bottom: var(--spacing-xs);
  }
  
  .answer-value {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--fill-color-light);
    border-radius: var(--border-radius-base);
  }
}

.mistake-analysis {
  margin-bottom: var(--spacing-md);
  
  .analysis-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
  }
  
  .analysis-text {
    line-height: 1.6;
    color: var(--text-color-regular);
    padding: var(--spacing-md);
    background: var(--primary-color-light-9);
    border-radius: var(--border-radius-base);
  }
}

.mistake-tags {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.empty-mistakes {
  text-align: center;
  padding: var(--spacing-xl) 0;
}

// 响应式设计
@include respond-below(lg) {
  .score-display {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    text-align: center;
  }
  
  .result-actions {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .radar-container {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
}

@include respond-below(md) {
  .container {
    padding: 0 var(--spacing-md);
  }
  
  .score-main {
    flex-direction: column;
    text-align: center;
  }
  
  .score-circle {
    width: 120px;
    height: 120px;
    
    .score-value {
      font-size: 2.5rem;
    }
  }
  
  .result-title {
    font-size: 2rem;
  }
  
  .stats-overview {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .answer-comparison {
    grid-template-columns: 1fr;
  }
  
  .result-tabs {
    :deep(.el-tabs__content) {
      padding: var(--spacing-md);
    }
  }
}

@include respond-below(sm) {
  .stats-overview {
    grid-template-columns: 1fr;
  }
  
  .type-details,
  .knowledge-details {
    flex-direction: column;
    gap: var(--spacing-xs);
  }
  
  .mistakes-header,
  .review-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-md);
  }
  
  .mistake-header,
  .review-header {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }
}
</style>